<script setup>
import { ref, computed, onMounted } from 'vue'
import { Field, CellGroup, DatePicker, Uploader, Form, showToast, Popup, Picker, Area } from 'vant'
import { showFailToast, showConfirmDialog } from 'vant'
import { userApi } from '@/api'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const costSum = ref('')
const ticketInfo = ref({
  "ticketno": "",
  "phone": "",
  "name": "",
  "checkName": "",
  "ticketsum": 0,
  "uuid": "",
  "ticketName": ""
})

const init = async () => {
  const uid = localStorage.getItem('uid')
  const { result } = route.query
  console.log(result)
  if (result) {
    try {
      const res = await userApi.checkQrCode({
        uid: uid,
        checkCode: result
      })
      console.log(res)
      ticketInfo.value = res
    } catch (err) {
      showToast({
        type : 'fail',
        message: typeof err ==='string'? err : '获取消费券信息失败',
        onClose: () => {
          router.replace({
            path: '/merchant'
          })
        }
      })
    }
  }
}

onMounted(() => {
  init()
})


const loading = ref(false)

const onSubmit = async () => {
  if (loading.value) return
  showConfirmDialog({
    title: '确定要核销吗?',
    message:
      '核销前请仔细确认消费券内容',
  })
    .then(async () => {
      try {
        loading.value = true
        const payload = {
          checkUid: localStorage.getItem('uid'),
          ticketNo: ticketInfo.value.ticketno,
          companyname: ticketInfo.value.checkName,
          uuid: ticketInfo.value.uuid,
          costSum: costSum.value,
        }

        const response = await userApi.doCheck(payload)
        if (response.code === 0) {
          showToast({
            message: '提交成功',
            type: 'success',
            onClose: () => {
              router.replace({
                path: '/merchant'
              })
            }
          })
        } else {
          showToast(response.msg || '提交失败')
        }
      } catch (error) {
        console.error('表单提交失败:', error)
        showFailToast(error)
      } finally {
        loading.value = false
      }
    })
    .catch(() => {
      // on cancel
    });


}

</script>

<template>
  <div style="height: 100vh;background: linear-gradient(#E4594A 10%, #FFF3F3 50%);">
    <Form @submit="onSubmit" style="padding: 15px;" v-if="ticketInfo.ticketno">
      <div style="background: #FFFFFF;border-radius: 8px;">
        <CellGroup inset :title="`商户核销`">
          <div>
            <Field v-model="ticketInfo.ticketName" label="消费券名称" readonly
              :rules="[{ required: true, message: '请输入会员姓名' }]" />
          </div>
          <div>
            <Field v-model="ticketInfo.ticketno" label="消费券码" readonly
              :rules="[{ required: true, message: '请输入会员姓名' }]" />
          </div>
          <div>
            <Field v-model="ticketInfo.ticketsum" label="消费券价值" readonly
              :rules="[{ required: true, message: '请输入会员姓名' }]" />
          </div>
          <div>
            <Field v-model="ticketInfo.name" label="所属会员姓名" placeholder="请输入会员姓名" readonly
              :rules="[{ required: true, message: '请输入会员姓名' }]" />
          </div>
          <div>
            <Field v-model="ticketInfo.phone" label="手机号" placeholder="请输入会员姓名" readonly
              :rules="[{ required: true, message: '请输入会员姓名' }]" />
          </div>
          <div>
            <Field v-model="ticketInfo.checkName" label="当前商户" placeholder="请输入会员姓名" readonly
              :rules="[{ required: true, message: '请输入会员姓名' }]" />
          </div>
          <div>
            <Field v-model="costSum" label="实付金额" type="number" placeholder="请输入金额"
              :rules="[{ required: true, message: '请输入金额' }]" />
          </div>
        </CellGroup>
      </div>



      <div style="margin: 16px;">
        <van-button round color="#EE5143" block type="primary" native-type="submit" :loading="loading"
          loading-text="提交中...">
          确认核销
        </van-button>
      </div>
    </Form>
  </div>
</template>

<style scoped lang="less">
.van-cell-group {
  margin: 10px 0;
}

.van-uploader {
  padding: 10px 0;
}

.van-button--small {
  margin-left: 10px;
}

:deep(.van-field__control) {
  text-align: right;
}

.custom-button {
  background-color: #EE5143 !important;
  border-color: #EE5143 !important;
}

.custom-button:active {
  background-color: #d64539 !important;
  border-color: #d64539 !important;
}
</style>
<style>
.van-cell-group__title {
  font-size: 16px;
  color: #333333;
  font-weight: bold;
}

.van-field__label {
  font-size: 14px;
  color: #666666;
}
</style>